<template>
	<view>
		<u-navbar title="酒店设置" @leftClick="rightClick" :placeholder="true" :autoBack="false"></u-navbar>

		<view class="" v-if="info.type == 1">

			<view class="form xbgf xpb32">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						酒店名称
					</view>
				</view>

				<view class="form-input xpl32 xpr32 xbs">
					<input type="text" v-model="room.name" placeholder="请输入酒店名称" />
				</view>
			</view>


			<view class="form xbgf xpb32 xmt20">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						酒店地址
					</view>
				</view>
				<view class="form-address xflex-x" @click="onlocak()">
					<image class="form-addicon" src="/pagesA/static/images/weizhi.png" mode=""></image>
					<view class="form-addname">
						{{ room.location?room.location:'点击选择位置' }}
					</view>
				</view>
				<view class="form-input xpl32 xpr32 xbs">
					<input type="text" placeholder="请输入详细地址" v-model="room.address" />
				</view>
			</view>


			<view class="form xbgf xpb32 xmt20">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						输入联系方式
					</view>
				</view>

				<view class="form-input xpl32 xpr32 xbs">
					<view class="xflex-x">
						<view class="form-qh xflex-x">
							<view class="form-qh-num">
								+86
							</view>
							<image class="form-qh-icon" src="/pagesA/static/images/zhankai.png" mode=""></image>
						</view>
						<input type="text" v-model="room.mobile" placeholder="请输入联系方式" />
					</view>
				</view>
			</view>


			<view class="form xbgf xpb32">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						酒店基本介绍
					</view>
				</view>

				<view class="form-input xpl32 xpr32 xbs">
					<u--textarea v-model="room.intro" placeholder="请输入内容"></u--textarea>
				</view>
			</view>


			<view class="form xbgf xpb32">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						添加酒店盲盒图片
					</view>
				</view>

				<view class="form-inputs xpl32 xpr32 xbs xbgf xflex-x">

					<view class="form-imgs pr xmr20" v-for="(item,index) in room.image" :key="index">
						<image class="form-imgs-img" :src="item.fullurl" mode=""></image>
						<image class="form-imgs-gb pa" @click="cancel1(index)" src="/pagesA/static/images/guanbi2.png"
							mode=""></image>
					</view>
					<view class="form-upload xflex-y-center" @click="chooseImage()">
						<image class="form-upload-icon" src="/pagesA/static/images/xiangji.png" mode=""></image>
						<view class="form-upload-text">
							添加图片
						</view>
					</view>
				</view>

			</view>


			<view class="form xbgf xpb32">
				<view class="xflex-x xp32">
					<view class="form-span">

					</view>
					<view class="form-name">
						添加酒店详情图片
					</view>
				</view>

				<view class="form-inputs xpl32 xpr32 xbs xbgf xflex-x">

					<view class="form-imgs pr xmr20" v-for="(item,index) in room.images" :key="index">
						<image class="form-imgs-img" :src="item.fullurl" mode=""></image>
						<image class="form-imgs-gb pa" @click="cancel2(index)" src="/pagesA/static/images/guanbi2.png"
							mode=""></image>
					</view>
					<view class="form-upload xflex-y-center" @click="chooseImage1()">
						<image class="form-upload-icon" src="/pagesA/static/images/xiangji.png" mode=""></image>
						<view class="form-upload-text">
							添加图片
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="" v-if="info.type == 1">
			<view class="xmt32 xbb8D xpb32 xbgf xp32">
				<view class="xflex-x">
					<view class="wmpopup-span">

					</view>
					<view class="xfz32 xmt12 xc1">
						酒店标签
					</view>

				</view>
				<view class=" xmt32">
					<view class="evalu tag">
						<view class="xmt10 tag-ps">
							<view class="tag-pan xflex-x-between xmb10" v-for="(item,index) in room.label" :key="index">
								<view class="">
									#{{item}}
								</view>
								<image class="tag-dele xml24" @click="deletelab(index)"
									src="/static/image/car/spanx.png" mode=""></image>
							</view>
						</view>
						<view class="xflex-x xmt10">

							<view class="input-box" v-if="info.show">
								<span class="input-box__label">{{info.value}}</span>
								<input class="input-box__input" @blur="onBlur" v-model="info.value" type="text" />
							</view>
							<image v-else @click="info.show = true" class="tag-add" src="/static/image/car/addx.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>


			<view class="xmt32 xbb8D xpb32 xbgf xp32 xmt20">
				<view class="xflex-x">
					<view class="wmpopup-span">

					</view>
					<view class="xfz32 xmt12 xc1">
						酒店星级
					</view>

				</view>
				<view class="wmpopup-leve xmt32">
					<view class="wmpopup-leve-item  xflex-x-center" :class="room.star_id == item.id?'active':''"
						@click="room.star_id = item.id" v-for="(item,index) in info.typeList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="xmt32 xbb8D xpb32 xbgf xp32 xmt20">
				<view class="xflex-x">
					<view class="wmpopup-span">

					</view>
					<view class="xfz32 xmt12 xc1">
						配套及周边
					</view>


				</view>
				<view class="wmpopup-leve xmt32">
					<view class="wmpopup-leve-item  xflex-x-center"
						:class="room.support_ids.includes(item.id)?'active':''" @click="onzhou(item)"
						v-for="(item,index) in info.starList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="xmt32 xbb8D xpb32 xbgf xp32 xmt20">
				<view class="xflex-x">
					<view class="wmpopup-span">

					</view>
					<view class="xfz32 xmt12 xc1">
						服务设施
					</view>

				</view>
				<view class="wmpopup-leve xmt32">
					<view class="wmpopup-leve-item  xflex-x-center" :class="room.free_ids.includes(item.id)?'active':''"
						@click="onfuwu(item)" v-for="(item,index) in info.serveList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>


		<view class="xflex-y-center xmb40" v-if="info.type == 2">
			<image class="success" src="/pagesA/static/images/success.png" mode=""></image>
			<view class="successtit">
				上传成功！平台审核中...
			</view>
		</view>

		<view class="next xmt60" @click="nextto()" v-if="info.type == 2">
			返回首页
		</view>
		
		<view class="xpt40 xpb40">
			<view class="next " @click="next()" v-if="info.type == 1">
				保存
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onBackPress,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		uploadFile,
		hotelstar,
		hoteltype,
		hotelsupport,
		hotelcharge,
		hoteladd,
		partnerhoteldetail,
		partnerhoteledit
	} from '../../../network/home.js'

	const handleBackButton = () => {
		// 自定义返回事件逻辑
		console.log('返回事件被阻止');
	};
	

	onMounted(() => {
		// 监听返回按钮事件
		uni.$on('hook:backbutton', handleBackButton);
	});

	onUnmounted(() => {
		// 移除监听
		uni.$off('hook:backbutton', handleBackButton);
	});

	let info = reactive({
		type: 1,
		value: '',
		show: false,
		typeList: [],
		starList: [],
		serveList: [],
		id:''
	})

	let room = reactive({
		id: '',
		name: "",
		location: "",
		address: "",
		mobile: "",
		intro: "",
		image: [],
		images: [],
		label: [],
		star_id: '',
		support_ids: [],
		free_ids: []
	})

	// 删除标签
	const deletelab = (index) => {
		room.label.splice(index, 1)
	}

	const rightClick = () => {
		if(info.id){
			uni.navigateBack()
			return
		}
		if (info.type == 1) {
			info.type = 0
		} else {
			uni.navigateBack()
		}
	}

	const onBlur = () => {

		room.label.push(info.value)
		info.value = ''
		info.show = false
	}


	onLoad((option) => {
		
		console.log(option);
		info.id = option.id
		room.id = option.id
		getpartnerhoteldetail()
	})

	const getpartnerhoteldetail = () => {
		partnerhoteldetail({
			id: room.id
		}).then(res => {
			console.log(res);
			room.name = res.data.name
			room.location = res.data.location
			room.address = res.data.address
			room.mobile = res.data.mobile
			room.intro = res.data.intro

			room.images = res.data.images
			room.label = res.data.label
			room.star_id = res.data.star_id
			room.support_ids = res.data.support_ids.map(item => {
				return Number(item)
			})
			room.free_ids = res.data.free_ids.map(item => {
				return Number(item)
			})

			room.image = res.data.image,

				console.log(room);

		})
	}

	// 下一步
	const nextto = () => {
		uni.reLaunch({
			url:"/pagesA/page/mine/mine"
		})
	}

	const next = () => {
		if (room.name == '') {
			uni.showToast({
				icon: "none",
				title: "名称不能为空"
			})
			return
		}
		if (room.location == '') {
			uni.showToast({
				icon: "none",
				title: "地址不能为空"
			})
			return
		}
		if (room.mobile == '') {
			uni.showToast({
				icon: "none",
				title: "联系方式不能为空"
			})
			return
		}
		if (room.intro == '') {
			uni.showToast({
				icon: "none",
				title: "请填写简介"
			})
			return
		}
		// if (room.image.length == 0) {
		// 	uni.showToast({
		// 		icon: "none",
		// 		title: "请上传图片"
		// 	})
		// 	return
		// }
		// if (room.images.length == 0) {
		// 	uni.showToast({
		// 		icon: "none",
		// 		title: "请上传详情图片"
		// 	})
		// 	return
		// }
		
			if (room.label.length == 0) {
				uni.showToast({
					icon: "none",
					title: "请添加标签"
				})
				return
			}
			if (room.star_id == '') {
				uni.showToast({
					icon: "none",
					title: "请选择星级"
				})
				return
			}
			if (room.support_ids.length == 0) {
				uni.showToast({
					icon: "none",
					title: "请选择配套"
				})
				return
			}
			if (room.free_ids.length == 0) {
				uni.showToast({
					icon: "none",
					title: "请选择服务"
				})
				return
			}
			room.image = room.image[0].url
			let arr = []
			room.images.forEach(item => {
				arr.push(item.url)
			})
			room.images = arr
			partnerhoteledit(room).then(res => {
				uni.navigateBack()
				
				setTimeout(()=>{
					uni.showToast({
						icon:"none",
						title:"保存成功"
					})
				},1000)
			})
		
	}

	const onlocak = () => {
		uni.chooseLocation({
			success(res) {
				console.log(res);
				room.location = res.address
			}
		})
	}

	// 星级
	hotelstar().then(res => {
		console.log(res);
		info.typeList = [...res.data]
	})
	// 周边
	hotelsupport().then(res => {
		info.starList = [...res.data]
	})

	// 服务 收费
	hotelcharge().then(res => {
		info.serveList = [...res.data]
	})

	// 点击服务
	const onfuwu = (data) => {
		if (room.free_ids.includes(data.id)) {
			room.free_ids.splice(room.free_ids.indexOf(data.id), 1)
		} else {
			room.free_ids.push(data.id)
		}
	}


	// 点击周边
	const onzhou = (data) => {

		if (room.support_ids.includes(data.id)) {
			room.support_ids.splice(room.support_ids.indexOf(data.id), 1)
		} else {
			room.support_ids.push(data.id)
		}

	}

	// 添加图片
	const chooseImage = () => {
		uni.chooseImage({
			success: async function(chooseImageRes) {
				const lists = chooseImageRes.tempFilePaths;
				let arr = []
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i]);
					console.log(result);

					room.image.push({
						...result.data,
					})
				}
			}
		});
	}

	const chooseImage1 = () => {
		uni.chooseImage({
			success: async function(chooseImageRes) {
				const lists = chooseImageRes.tempFilePaths;
				let arr = []
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i]);
					console.log(result);

					room.images.push({
						...result.data,
					})
				}
			}
		});
	}

	const cancel1 = (index) => {
		room.image.splice(index, 1)
	}

	const cancel2 = (index) => {
		room.images.splice(index, 1)
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.steps {
		padding: 40rpx 0 20rpx 0;

		&-xx {
			width: 150rpx;
			border: 2px dashed #CCCCCC;

		}

		&-xx1 {
			width: 150rpx;
			border: 2px dashed #0DBFFB;

		}

		&-item {

			&-yuan {
				width: 40rpx;
				height: 40rpx;
				background: linear-gradient(90deg, #0DBFFB, #198EFF);
				border-radius: 50%;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
			}

			&-yuan1 {
				width: 40rpx;
				height: 40rpx;
				background: #CCCCCC;
				border-radius: 50%;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
			}

			&-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
				margin-top: 10rpx;
			}




		}
	}

	.form {

		&-span {
			width: 8rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 8rpx;
		}

		&-name {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #444444;
		}

		&-input {
			width: 690rpx;
			min-height: 80rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin: auto;
			padding: 20rpx;
			box-sizing: border-box;
		}

		&-inputs {
			width: 690rpx;
			min-height: 80rpx;
			border-radius: 6rpx;
			margin: auto;
			padding: 20rpx;
			box-sizing: border-box;
		}

		&-addicon {
			width: 28rpx;
			height: 28rpx;
		}

		&-addname {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #62BAF8;
		}

		&-address {
			width: 690rpx;
			min-height: 80rpx;
			border-radius: 6rpx;
			border: 1px solid #CCCCCC;
			padding: 24rpx 27rpx;
			box-sizing: border-box;
			margin: auto;
			margin-bottom: 24rpx;
		}

		&-qh {
			margin-right: 27rpx;

			&-num {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}

			&-icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		&-upload {
			width: 120rpx;
			height: 120rpx;
			background: #F8F8F8;
			border-radius: 10rpx;

			&-icon {
				width: 60rpx;
				height: 60rpx;
			}

			&-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				margin-top: 6rpx;
			}
		}

		&-imgs {
			width: 120rpx;
			height: 120rpx;
			background: #000000;
			border-radius: 10rpx;

			&-img {
				width: 100%;
				height: 100%;
			}

			&-gb {
				width: 40rpx;
				height: 40rpx;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.next {
		width: 620rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: auto;
	}

	.active {
		background: #0EBBFB !important;
		color: #FFFFFF !important;
	}

	.wmpopup {


		.active {
			background: #0EBBFB;
			color: #FFFFFF;
		}

		&-span {
			width: 8rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 7rpx;
			margin-top: 6rpx;
		}

		&-leve {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 18rpx;

			&-item {
				width: 162rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;

			}
		}
	}

	.success {
		width: 182rpx;
		height: 182rpx;
		margin-top: 125rpx;
	}

	.successtit {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		margin-top: 28rpx;
	}

	.tag {
		margin-top: 10rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}

		&-ps {
			display: flex;
			flex-wrap: wrap;
		}

		&-pan {
			// min-width: 184rpx;
			height: 52rpx;
			background: #EEEEEE;
			border-radius: 10rpx;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;

			line-height: 53rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			margin-right: 10rpx;


		}

		&-dele {
			width: 24rpx;
			height: 24rpx;
		}

		&-add {
			width: 116rpx;
			height: 52rpx;
		}

		&-ipt {
			// width: 116rpx;
			min-width: 116rpx;
			height: 52rpx;
			border: 1rpx solid #eee;
			border-radius: 12rpx;

		}
	}


	.input-box {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		border: 1px solid #eee;
		border-radius: 5px;
		height: 52rpx;
		min-width: 116rpx;
		/* font family is very important */
		font-family: Arial, 'microsoft yahei';
		font-size: 14px;

	}

	.input-box__label {
		display: inline-block;
		font-size: inherit;
		line-height: normal;
		visibility: hidden;
		font-family: inherit;
		padding: 0 10px;

	}

	.input-box__input {

		box-sizing: border-box;
		position: absolute;
		display: inline;
		font-size: inherit;
		font-family: inherit;
		line-height: normal;
		border-radius: inherit;
		height: 100%;
		width: 100%;
		outline: 0;
		border: 0;
		margin: 0;
		padding: 0 10px;
	}
</style>